/*柱状图减少效果*/
@keyframes reduce1
{
    0% {
        height: 100%;
    }
    100% {
        height: 70%;
    }
}

@-moz-keyframes reduce1 /* Firefox */
{
    0% {
        height: 100%;
    }
    100% {
        height: 70%;
    }
}

@-webkit-keyframes reduce1 /* Safari and Chrome */
{
    0% {
        height: 100%;
    }
    100% {
        height: 70%;
    }
}

@-o-keyframes reduce1 /* Opera */
{
    0% {
        height: 100%;
    }
    100% {
        height: 70%;
    }
}


@keyframes reduce2
{
    0% {
        height: 70%;
    }
    100% {
        height: 40%;
    }
}

@-moz-keyframes reduce2 /* Firefox */
{
    0% {
        height: 70%;
    }
    100% {
        height: 40%;
    }
}

@-webkit-keyframes reduce2 /* Safari and Chrome */
{
    0% {
        height: 70%;
    }
    100% {
        height: 40%;
    }
}

@-o-keyframes reduce2 /* Opera */
{
    0% {
        height: 70%;
    }
    100% {
        height: 40%;
    }
}


@keyframes reduce3
{
    0% {
        height: 40%;
    }
    100% {
        height: 22%;
    }
}

@-moz-keyframes reduce3 /* Firefox */
{
    0% {
        height: 40%;
    }
    100% {
        height: 22%;
    }
}

@-webkit-keyframes reduce3 /* Safari and Chrome */
{
    0% {
        height: 40%;
    }
    100% {
        height: 22%;
    }
}

@-o-keyframes reduce3 /* Opera */
{
    0% {
        height: 40%;
    }
    100% {
        height: 22%;
    }
}

/*字幕效果*/
@keyframes jianru
{
    0% {
        right: -3rem;
    }
    100% {
        right: 10rem;
    }
}

@-moz-keyframes jianru /* Firefox */
{
    0% {
        right: -3rem;
    }
    100% {
        right: 10rem;
    }
}

@-webkit-keyframes jianru /* Safari and Chrome */
{
    0% {
        right: -3rem;
    }
    100% {
        right: 10rem;
    }
}

@-o-keyframes jianru /* Opera */
{
    0% {
        right: -3rem;
    }
    100% {
        right: 10rem;
    }
}

/*boy出现*/
@keyframes boyin
{
    0% {
        left: -1rem;
    }
    20% {
        left: 0.6rem;
    }
    40% {
        left: 0.4rem;
    }
    70% {
        left: 0.6rem;
    }
    80% {
        left: 0.5rem;
    }
    100% {
        left: 0.6rem;
    }
}

@-moz-keyframes boyin /* Firefox */
{
    0% {
        left: -1rem;
    }
    20% {
        left: 0.6rem;
    }
    40% {
        left: 0.4rem;
    }
    70% {
        left: 0.6rem;
    }
    80% {
        left: 0.5rem;
    }
    100% {
        left: 0.6rem;
    }
}

@-webkit-keyframes boyin /* Safari and Chrome */
{
    0% {
        left: -1rem;
    }
    20% {
        left: 0.6rem;
    }
    40% {
        left: 0.4rem;
    }
    70% {
        left: 0.6rem;
    }
    80% {
        left: 0.5rem;
    }
    100% {
        left: 0.6rem;
    }
}

@-o-keyframes boyin /* Opera */
{
    0% {
        left: -1rem;
    }
    20% {
        left: 0.6rem;
    }
    40% {
        left: 0.4rem;
    }
    70% {
        left: 0.6rem;
    }
    80% {
        left: 0.5rem;
    }
    100% {
        left: 0.6rem;
    }
}

@keyframes girlin
{
    0% {
        right: -1.6rem;
    }
    20% {
        right: 0.6rem;
    }
    40% {
        right: 0.4rem;
    }
    70% {
        right: 0.6rem;
    }
    80% {
        right: 0.5rem;
    }
    100% {
        right: 0.6rem;
    }
}

@-moz-keyframes boyin /* Firefox */
{
    0% {
        right: -1.6rem;
    }
    20% {
        right: 0.6rem;
    }
    40% {
        right: 0.4rem;
    }
    70% {
        right: 0.6rem;
    }
    80% {
        right: 0.5rem;
    }
    100% {
        right: 0.6rem;
    }
}

@-webkit-keyframes boyin /* Safari and Chrome */
{
    0% {
        right: -1.6rem;
    }
    20% {
        right: 0.6rem;
    }
    40% {
        right: 0.4rem;
    }
    70% {
        right: 0.6rem;
    }
    80% {
        right: 0.5rem;
    }
    100% {
        right: 0.6rem;
    }
}

@-o-keyframes boyin /* Opera */
{
    0% {
        right: -1.6rem;
    }
    20% {
        right: 0.6rem;
    }
    40% {
        right: 0.4rem;
    }
    70% {
        right: 0.6rem;
    }
    80% {
        right: 0.5rem;
    }
    100% {
        right: 0.6rem;
    }
}
/*失败动画*/
@keyframes fail1
{
    0% {
        width: 5rem;
        height: 2rem;
        line-height: 2rem;
        left: 2.5rem;
        bottom: 2.7rem;
        font-size: 0.6rem;
    }

    100% {
        width: 2.2rem;
        height: 0.6rem;
        left: 3.2rem;
        bottom: 2rem;
        line-height: 0.6rem;
    }
}

@-moz-keyframes fail1 /* Firefox */
{
    0% {
        width: 5rem;
        height: 2rem;
        line-height: 2rem;
        left: 2.5rem;
        bottom: 2.7rem;
        font-size: 0.6rem;
    }

    100% {
        width: 2.2rem;
        height: 0.6rem;
        left: 3.2rem;
        bottom: 2rem;
        line-height: 0.6rem;
    }
}

@-webkit-keyframes fail1 /* Safari and Chrome */
{
    0% {
        width: 5rem;
        height: 2rem;
        line-height: 2rem;
        left: 2.5rem;
        bottom: 2.7rem;
        font-size: 0.6rem;
    }

    100% {
        width: 2.2rem;
        height: 0.6rem;
        left: 3.2rem;
        bottom: 2rem;
        line-height: 0.6rem;
    }
}

@-o-keyframes fail1 /* Opera */
{
    0% {
        width: 5rem;
        height: 2rem;
        line-height: 2rem;
        left: 2.5rem;
        bottom: 2.7rem;
        font-size: 0.6rem;
    }

    100% {
        width: 2.2rem;
        height: 0.6rem;
        left: 3.2rem;
        bottom: 2rem;
        line-height: 0.6rem;
    }
}

@keyframes fail2
{
    0% {
        width: 10rem;
        height: 2rem;
        line-height: 2rem;
        left: 0.5rem;
        bottom: 1.9rem;
        font-size: 0.6rem;
    }

    100% {
        width: 3.8rem;
        bottom: 1.2rem;
        left: 3.2rem;
        height: 0.6rem;
        line-height: 0.6rem;
    }
}

@-moz-keyframes fail2 /* Firefox */
{
    0% {
        width: 10rem;
        height: 2rem;
        line-height: 2rem;
        left: 0.5rem;
        bottom: 1.9rem;
        font-size: 0.6rem;
    }

    100% {
        width: 3.8rem;
        bottom: 1.2rem;
        left: 3.2rem;
        height: 0.6rem;
        line-height: 0.6rem;
    }
}

@-webkit-keyframes fail2 /* Safari and Chrome */
{
    0% {
        width: 10rem;
        height: 2rem;
        line-height: 2rem;
        left: 0.5rem;
        bottom: 1.9rem;
        font-size: 0.6rem;
    }

    100% {
        width: 3.8rem;
        bottom: 1.2rem;
        left: 3.2rem;
        height: 0.6rem;
        line-height: 0.6rem;
    }
}

@-o-keyframes fail2 /* Opera */
{
    0% {
        width: 10rem;
        height: 2rem;
        line-height: 2rem;
        left: 0.5rem;
        bottom: 1.9rem;
        font-size: 0.6rem;
    }

    100% {
        width: 3.8rem;
        bottom: 1.2rem;
        left: 3.2rem;
        height: 0.6rem;
        line-height: 0.6rem;
    }
}


@keyframes word1-in
{
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes word1-in /* Firefox */
{
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes word1-in /* Safari and Chrome */
{
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes word1-in /* Opera */
{
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes word2-in
{
    0% {
        left: -3rem;
    }

    100% {
        left: 0.05rem;
    }
}

@-moz-keyframes word2-in /* Firefox */
{
    0% {
        left: -3rem;
    }

    100% {
        left: 0.05rem;
    }
}

@-webkit-keyframes word2-in /* Safari and Chrome */
{
    0% {
        left: -3rem;
    }

    100% {
        left: 0.05rem;
    }
}

@-o-keyframes word2-in /* Opera */
{
    0% {
        left: -3rem;
    }

    100% {
        left: 0.05rem;
    }
}


@keyframes word3-in
{
    0% {
        top: 2rem;
    }
    20% {
        top: 1.08rem;
    }
    40% {
        top: 1.5rem;
    }
    70% {
        top: 1.08rem;
    }
    85% {
        top: 1.18rem;
    }
    100% {
        top: 1.08rem;
    }
}

@-moz-keyframes word3-in /* Firefox */
{
    0% {
        top: 2rem;
    }
    20% {
        top: 1.08rem;
    }
    40% {
        top: 1.5rem;
    }
    70% {
        top: 1.08rem;
    }
    85% {
        top: 1.18rem;
    }
    100% {
        top: 1.08rem;
    }
}

@-webkit-keyframes word3-in /* Safari and Chrome */
{
    0% {
        top: 2rem;
    }
    20% {
        top: 1.08rem;
    }
    40% {
        top: 1.5rem;
    }
    70% {
        top: 1.08rem;
    }
    85% {
        top: 1.18rem;
    }
    100% {
        top: 1.08rem;
    }
}

@-o-keyframes word3-in /* Opera */
{
    0% {
        top: 2rem;
    }
    20% {
        top: 1.08rem;
    }
    40% {
        top: 1.5rem;
    }
    70% {
        top: 1.08rem;
    }
    85% {
        top: 1.18rem;
    }
    100% {
        top: 1.08rem;
    }
}

@keyframes word4-in
{
    0% {
        width: 80%;
    }
    30% {
        width: 150%;
    }
    60% {
        width: 80%;
    }
    90% {
        width: 100%;
    }
    100% {
        width: 80%;
    }
}

@-moz-keyframes word4-in /* Firefox */
{
    0% {
        width: 80%;
    }
    30% {
        width: 150%;
    }
    60% {
        width: 80%;
    }
    90% {
        width: 100%;
    }
    100% {
        width: 80%;
    }
}

@-webkit-keyframes word4-in /* Safari and Chrome */
{
    0% {
        width: 80%;
    }
    30% {
        width: 150%;
    }
    60% {
        width: 80%;
    }
    90% {
        width: 100%;
    }
    100% {
        width: 80%;
    }
}

@-o-keyframes word4-in /* Opera */
{
    0% {
        width: 80%;
    }
    30% {
        width: 150%;
    }
    60% {
        width: 80%;
    }
    90% {
        width: 100%;
    }
    100% {
        width: 80%;
    }
}


@keyframes word5-in
{
    0% {
        top: 0;
    }
    20% {
        top: 2.20rem;
    }
    40% {
        top: 1rem;
    }
    70% {
        top: 2.20rem;
    }
    85% {
        top: 1.8rem;
    }
    100% {
        top: 2.20rem;
    }
}
@-webkit-keyframes word5-in /* Safari and Chrome */
{
    0% {
        top: 2rem;
    }
    20% {
        top: 1.08rem;
    }
    40% {
        top: 1.5rem;
    }
    70% {
        top: 1.08rem;
    }
    85% {
        top: 1.18rem;
    }
    100% {
        top: 1.08rem;
    }
}

@-o-keyframes word5-in /* Opera */
{
    0% {
        top: 2rem;
    }
    20% {
        top: 1.08rem;
    }
    40% {
        top: 1.5rem;
    }
    70% {
        top: 1.08rem;
    }
    85% {
        top: 1.18rem;
    }
    100% {
        top: 1.08rem;
    }
}



@keyframes zhuzi-move
{
    0% {
        height: 1.2rem;
    }

    100% {
        height: 1.1rem;
    }
}

@-moz-keyframes zhuzi-move /* Firefox */
{
    0% {
        height: 1.2rem;
    }

    100% {
        height: 1.1rem;
    }
}

@-webkit-keyframes zhuzi-move /* Safari and Chrome */
{
    0% {
        height: 1.2rem;
    }

    100% {
        height: 1.1rem;
    }
}

@-o-keyframes zhuzi-move /* Opera */
{
    0% {
        height: 1.2rem;
    }

    100% {
        height: 1.1rem;
    }
}


@keyframes jump_heart
{
    0% {
        background: url("../img4/jump_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    20% {
        background: url("../img4/jump_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../img4/jump_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../img4/jump_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../img4/jump_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../img4/jump_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-moz-keyframes jump_heart /* Firefox */
{
    0% {
        background: url("../img4/jump_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    20% {
        background: url("../img4/jump_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../img4/jump_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../img4/jump_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../img4/jump_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../img4/jump_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-webkit-keyframes jump_heart /* Safari and Chrome */
{
    0% {
        background: url("../img4/jump_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    20% {
        background: url("../img4/jump_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../img4/jump_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../img4/jump_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../img4/jump_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../img4/jump_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-o-keyframes jump_heart /* Opera */
{
    0% {
        background: url("../img4/jump_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    20% {
        background: url("../img4/jump_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../img4/jump_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../img4/jump_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../img4/jump_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../img4/jump_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}



@keyframes zhiwen-move
{
    0% {
        width: 1.8rem;
        height: 1.8rem;
        left: 3.18rem;
    }

    100% {
        width: 1.6rem;
        height: 1.6rem;
        left: 3.28rem;
    }
}

@-moz-keyframes zhiwen-move /* Firefox */
{
    0% {
        width: 1.8rem;
        height: 1.8rem;
        left: 3.18rem;
    }

    100% {
        width: 1.6rem;
        height: 1.6rem;
        left: 3.28rem;
    }
}

@-webkit-keyframes zhiwen-move /* Safari and Chrome */
{
    0% {
        width: 1.8rem;
        height: 1.8rem;
        left: 3.18rem;
    }

    100% {
        width: 1.6rem;
        height: 1.6rem;
        left: 3.28rem;
    }
}

@-o-keyframes zhiwen-move /* Opera */
{
    0% {
        width: 1.8rem;
        height: 1.8rem;
        left: 3.18rem;
    }

    100% {
        width: 1.6rem;
        height: 1.6rem;
        left: 3.28rem;
    }
}

@keyframes fly-UP {
    0% {
        background: url("../assets/images/page0/fly_up/fly_up1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_up/fly_up2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_up/fly_up3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_up/fly_up4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_up/fly_up5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_up/fly_up6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-moz-keyframes fly-UP {
    0% {
        background: url("../assets/images/page0/fly_up/fly_up1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_up/fly_up2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_up/fly_up3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_up/fly_up4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_up/fly_up5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_up/fly_up6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-webkit-keyframes fly-UP {
    0% {
        background: url("../assets/images/page0/fly_up/fly_up1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_up/fly_up2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_up/fly_up3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_up/fly_up4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_up/fly_up5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_up/fly_up6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

}

@-o-keyframes fly-UP {
    0% {
        background: url("../assets/images/page0/fly_up/fly_up1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_up/fly_up2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_up/fly_up3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_up/fly_up4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_up/fly_up5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_up/fly_up6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@keyframes fly-heart {
    0% {
        background: url("../assets/images/page0/fly_heart/fly_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_heart/fly_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_heart/fly_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_heart/fly_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_heart/fly_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_heart/fly_heart6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-moz-keyframes fly-heart {
    0% {
        background: url("../assets/images/page0/fly_heart/fly_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_heart/fly_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_heart/fly_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_heart/fly_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_heart/fly_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_heart/fly_heart6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-webkit-keyframes fly-heart {
    0% {
        background: url("../assets/images/page0/fly_heart/fly_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_heart/fly_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_heart/fly_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_heart/fly_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_heart/fly_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_heart/fly_heart6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-o-keyframes fly-heart {
    0% {
        background: url("../assets/images/page0/fly_heart/fly_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_heart/fly_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_heart/fly_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_heart/fly_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_heart/fly_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_heart/fly_heart6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@keyframes flying-left {
    0% {
        position: fixed;
        left: 1rem;
        bottom: -1rem;
    }
    100% {
        position: fixed;
        left: -2.54rem;
        bottom: 30rem;
    }
}



@-moz-keyframes flying-left {
    0% {
        position: fixed;
        left: 1rem;
        bottom: -1rem;
    }
    100% {
        position: fixed;
        left: -2.54rem;
        bottom: 30rem;
    }
}

@-webkit-keyframes flying-left {
    0% {
        position: fixed;
        left: 1rem;
        bottom: -1rem;
    }
    100% {
        position: fixed;
        left: -2.54rem;
        bottom: 30rem;
    }
}

@-o-keyframes flying-left {
    0% {
        position: fixed;
        left: 1rem;
        bottom: -1rem;
    }
    100% {
        position: fixed;
        left: -2.54rem;
        bottom: 30rem;
    }
}


@keyframes flying-right {
    0% {
        position: fixed;
        right: 0.8rem;
        bottom: 0;
    }
    100% {
        position: fixed;
        right: -2.54rem;
        bottom: 20rem;
    }
}



@-moz-keyframes flying-right {
    0% {
        position: fixed;
        right: 0.8rem;
        bottom: 0;
    }
    100% {
        position: fixed;
        right: -2.54rem;
        bottom: 20rem;
    }
}

@-webkit-keyframes flying-right {
    0% {
        position: fixed;
        right: 0.8rem;
        bottom: 0;
    }
    100% {
        position: fixed;
        right: -2.54rem;
        bottom: 20rem;
    }
}

@-o-keyframes flying-right {
    0% {
        position: fixed;
        right: 0.8rem;
        bottom: 0;
    }
    100% {
        position: fixed;
        right: -2.54rem;
        bottom: 20rem;
    }
}
